<script setup>
const props = defineProps({
  uploadFile: Object,
});
</script>

<template>
  <div class="progress-container">
    <div class="name">{{ props.uploadFile.name }}</div>
    <div :style="{'width': props.uploadFile.percentage + '%'}" class="percentage"></div>
  </div>
</template>

<style lang="scss" scoped>
.progress-container {
  display: flex;
  height: 30px;
  border: 1px dashed #dcdfe6;
  padding: 0 10px;
  position: relative;

  .name {
    float: left;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: black;
    z-index: 999;
  }

  .percentage {
    background-color: #67c23a;
    width: 100%;
    height: 30px;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.2s linear;
  }
}
</style>